<template>
	<view class="ShareCanvas">
		<view class="canvas">
			<canvas canvas-id="shareCanvas" />
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		defineExpose
	} from "vue";
	const instance = getCurrentInstance()
	// console.log(instance);
	// 订单分享
	const setOrderCanvas = (info) => {
		return new Promise(async (resolve, reject) => {
			// console.log('订单分享-info', info);
			try {
				const ctx = uni.createCanvasContext('shareCanvas', instance)
				console.log(ctx, 'ctx.............');
				// 绘制背景图
				ctx.setFillStyle('#F8F8F8')
				ctx.fillRect(0, 0, 211, 120) // 保证宽高比是 5:4

				if (info.avatar) {
					// 团长头像
					ctx.save();
					setRadius(ctx, 5,0, 5, 30, 30)
					ctx.clip(); // 画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
					try {
						const {
							path
						} = await getImge(info.avatar)
						ctx.drawImage(path, 0, 5, 30, 30)
					} catch (error) {
						console.error(error);
					}
					ctx.restore();
				}

				if (info.memberName) {
					// 团长昵称
					ctx.setFontSize(12);
					ctx.setTextAlign('left')
					ctx.setFillStyle('#96999B')
					ctx.fillText(info.memberName, 35, 18)
					ctx.fillText(info.workUnit, 35, 35)
				}
				ctx.setFontSize(14);
				ctx.setTextAlign('center')
				ctx.setFillStyle('#333333')
				ctx.fillText(info.trendsContent, 55, 65)
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'shareCanvas',
							success: (res) => {
								return resolve(res.tempFilePath)
							},
							fail: function(error) {
								console.log('fail----fail', error);
								//TODO
								return reject(error)
							}
						}, instance)
					}, 500);
				}))
			} catch (error) {
				console.log('画图失败error', error);
				return reject(error)
			}
		})
	}
	/**
	 * 设置圆角矩形
	 *
	 * @param ctx 绘图上下文
	 * @param cornerRadius 圆角半径
	 * @param width 矩形宽度
	 * @param height 矩形高度
	 * @param x 矩形左上角的 x 坐标
	 * @param y 矩形左上角的 y 坐标
	 * @returns 无返回值
	 */
	const setRadius = (ctx, cornerRadius, x, y, width, height) => {
		// 开始绘制路径
		ctx.beginPath();
		// 绘制最左侧的圆角
		ctx.arc(x + cornerRadius, y + cornerRadius, cornerRadius, Math.PI, Math.PI * 1.5);
		// 绘制顶部边缘
		ctx.moveTo(x + cornerRadius, y);
		ctx.lineTo(x + width - cornerRadius, y);
		ctx.lineTo(x + width, y + cornerRadius);
		// 绘制最右侧的圆角
		ctx.arc(x + width - cornerRadius, y + cornerRadius, cornerRadius, Math.PI * 1.5, Math.PI * 2);
		// 绘制右侧边缘
		ctx.lineTo(x + width, y + height - cornerRadius);
		ctx.lineTo(x + width - cornerRadius, y + height);
		// 绘制最下侧的圆角
		ctx.arc(x + width - cornerRadius, y + height - cornerRadius, cornerRadius, 0, Math.PI * 0.5);
		// 绘制底部边缘
		ctx.lineTo(x + cornerRadius, y + height);
		ctx.lineTo(x, y + height - cornerRadius);
		// 绘制最左侧的圆角
		ctx.arc(x + cornerRadius, y + height - cornerRadius, cornerRadius, Math.PI * 0.5, Math.PI);
		// 绘制左侧边缘
		ctx.lineTo(x, y + cornerRadius);
		ctx.lineTo(x + cornerRadius, y);
		// 闭合路径
		ctx.closePath();
	}
	// // 获取图片地址
	const getImge = (path) => {
		console.log(path);
		// 利用promise异步转同步，否则可能显示不了～
		return new Promise((resolve, reject) => {
			uni.getImageInfo({
				src: path,
				success: function(res) {
					console.log(res);
					if (res && res.path) {
						resolve(res)
					} else {
						reject(false)
					}
				},
				fail: function(res) {
					reject(res)
				}
			})
		})
	}
	const getSales = (sales) => {
		return sales >= 10000 ? sales / 10000 + 'w+' : sales
	}
	defineExpose({
		setOrderCanvas
	})
</script>

<style lang="scss" scoped>
	// 隐藏画布
	.ShareCanvas {
		position: absolute;
		top: -200px;
		z-index: -1;
		opacity: 0;

		.canvas canvas {
			width: 211px;
			height: 170px; // +16
		}
	}
</style>